<template>
  <el-drawer
    title="认证模块参数"
    v-model="visible"
    :direction="direction"
    :size="800"
  >
    <section class="drawer-main">
      <table class="pure-table">
        <thead>
          <tr>
            <th>参数</th>
            <th>值</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in requestData" :key="index">
            <td>
              <el-input v-model="item.key" placeholder="请输入"></el-input>
            </td>
            <td>
              <el-input v-model="item.value" placeholder="请输入"></el-input>
            </td>
            <td><span class="del" @click="delRow(index)">删除</span></td>
          </tr>
          <tr>
            <td colspan="3">
              <el-button type="primary" @click="addRow">+增加参数</el-button>
            </td>
          </tr>
        </tbody>
      </table>
    </section>
    <footer class="drawer-footer">
      <el-button type="primary" @click="submit" :loading="loading">
        确 定
      </el-button>
      <el-button @click="beforeClose">取 消</el-button>
    </footer>
  </el-drawer>
</template>

<script>
import { defineComponent, watch, computed, ref } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import { createNode, updateNode, testConnect } from "@/api/adaptation";
import useEditDrawer from "@/hooks/useEditDrawer";
import AppFormSelect from "@/components/AppFormSelect/";
import { ElMessage } from "element-plus";
import { isJSON } from "@/utils/index.js";
export default defineComponent({
  name: "EditDialog",
  emits: ["update:modelValue", "update-list"],
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: () => {},
    },
    // create 新增， update 修改
    type: {
      type: String,
      default: "create",
    },
  },
  components: { AppFormSelect },
  setup(props, { emit }) {
    const store = useStore();
    const route = useRoute();
    const {
      visible,
      direction,
      title,
      loading,
      ruleForm,
      ruleFormRef,
      beforeClose,
    } = useEditDrawer({
      createApi: createNode,
      editApi: updateNode,
      emit,
      type: props.type,
      props,
    });
    const requestData = ref([]);
    const addRow = () => {
      requestData.value.push({ key: "", value: "" });
      console.log(requestData.value);
    };
    const delRow = (index) => {
      requestData.value.splice(index, 1);
    };
    const submit = async () => {
      // console.log(requestData.value);
      store.commit(
        "app/PUT_SERVICE_HTTP_AUTH",
        JSON.stringify(requestData.value)
      );
      ElMessage.success("参数保存成功");
      setTimeout(() => {
        beforeClose();
      }, 500);
      // console.log("state：", store.state.app.serviceBody);
    };
    let editMode = route.name == "EditService";
    // 显示时赋值
    watch(visible, (value) => {
      if (value) {
        ruleForm.value = {
          ...props.item,
        };
        console.log("显示时赋值");
      }
      if (editMode) {
        let authCfgJson =
          store.state.app.serviceBody.ifParam.adptIfCfgHttp.authCfgJson;
        requestData.value = isJSON(authCfgJson) ? JSON.parse(authCfgJson) : [];
      }
    });
    return {
      loading,
      visible,
      direction,
      submit,
      beforeClose,
      requestData,
      addRow,
      delRow,
    };
  },
});
</script>

<style lang="scss" scoped>
$height: 50px;
.drawer-main {
  height: calc(100% - 50px);
}
.drawer-footer {
  text-align: right;
  height: $height;
  line-height: $height;
}
</style>
